Why marketers should care about mobile page speed

For marketers, the good news is: You don't have to be a developer to help improve your brand's mobile page speed. By learning more about how your campaign or content impacts site performance, you can work with your brand's site owners to solve any issues ahead of time—ensuring your efforts reach their full potential.

A new way to learn about site performance

We know that the speed of a mobile site can win—or lose—a shopper. To find out more about the nuances of mobile site performance, we partnered with SOASTA, a leading performance and analytics company. Rather than rely on old-school research methods, we used machine learning—an approach that uses an algorithm to identify correlations within a large data set to then make predictions for new data sets.

We built two machine-learning models: one for predicting conversions and one for predicting bounce rates. Each model used real-world data from a large sample of mobile e-commerce sites, correlating the impact of 93 different page metrics from image formats to number of scripts. Simply put, the two models looked for which mobile-site factors would lead shoppers to buy or bounce. The conversion model had a prediction accuracy of 93%, and the bounce model was even more accurate, at 96%.

Here are the most important findings from both models—and how you and your dev team can use the models yourselves to learn more about your own site's performance.

More complex pages can hurt conversion rates

What we found here seems relatively straightforward: Shoppers are less likely to convert on clunky, complex site pages. But let's really dive into what "complex" means, by looking at the top page attributes that hurt conversion: number of elements on the page and the number of images.

1. The number of page elements. The more elements on a page, the greater the page's weight and complexity. A typical web page today weighs 2,486KB and contains a hundred or so assets hosted on dozens of different servers. Many of these assets are unoptimized, unmeasured, and unmonitored—and therefore unpredictable. This makes page loads volatile.

We found that the number of elements on a page was the greatest predictor of conversions. And when we looked at entire sessions, pages that had more images and other elements led to fewer conversions. The culprit might be the cumulative performance impact of all those page elements.

Takeaway: As a site owner, you can tackle this problem by setting performance budgets for pages. This means, for example, you could decide you want your site to load within three seconds (the "budget" of each page). Using that benchmark, you can cull unnecessary page elements that cause the load time to exceed that limit. You can also audit and monitor all the third-party scripts on your site that affect your mobile page speed.

2. The number of images. In our research, we found that the number of images on a page was the second greatest predictor of conversions. Consider this: On a typical retail page, graphic elements such as favicons, logos, and product images can easily comprise up to two-thirds (in other words, hundreds of kilobytes) of a page's total weight. The result: cumulatively slow page loads throughout a session. In fact, we found sessions that converted users had 38% fewer images than sessions that didn't convert.

Takeaway: To make sure that your mobile page speed is as fast as possible, confirm that your images are formatted correctly. For example, saving a simple graphic as a JPEG rather than a PNG can cut its file size by more than half. Images should also be compressed and resized. There are advanced optimization techniques for those who want to squeeze as much performance juice from their images as possible.

Slow pages can increase bounces

For bounce rate, which measures the percentage of people that leave your mobile site without exploring beyond the first page, speed has the most impact. But in the world of site performance, speed has many faces. Let's look at the top two site attributes that impact bounce rates: DOM ready time (we'll explain in a moment) and full-page load time.

1. DOM ready time. We found that DOM ready time—the amount of time it takes for the page's HTML code to be received and parsed by the browser—is the greatest predictor of bounce rate. (Or, think of it like this: It's kind of like getting ready to cook. Your cookbook is open, your recipe is in front of you, and your ingredients are on standby.) While users can't perceive when HTML code has been received and parsed, it has to be loaded before visible elements like images can be loaded.

Overall, when DOM ready times throughout a visit were slower, people bounced more. Our research found that bounced sessions had DOM ready times that were 55% slower than nonbounced sessions. We also noticed that bounce rates were even higher if the first page in the visit had a significantly slower DOM ready time than the remaining pages. This tells us that first impressions matter: If people's initial experience visiting a site is slow, they're more likely to bounce later. That initial interaction seems to color people's perception of the site and decrease their willingness to be patient throughout the transaction process.

Takeaway: One way to speed up the DOM ready time of your site is to avoid the use of JavaScript (a type of code) that blocks and prevents a browser from parsing HTML code. The most common elements with JavaScript are third-party ads, and analytics and social widgets that must be fetched from an external server before they can load. (Imagine that you're at restaurant and your waiter is ready to bring your meal, but first has to wait for the salt and pepper to be delivered from another restaurant.) For more ideas on how to prevent JavaScript from affecting DOM ready time, here's a guide for developers.

2. Full-page load time. Next to DOM ready time, the number of seconds it took for the full page to load—including images, fonts, CSS codes, etc.—had the most impact on whether a user would stay on a mobile site. We found the median mobile website load times for bounced sessions were about 2.5 seconds slower than nonbounced sessions.

This finding is compelling because, within the web performance industry, there has been a growing tendency to regard page load time as a meaningless metric. With such a strong correlation between load time and bounce rate, dismissing it may be premature.

Takeaway: We've mentioned a couple of ways to improve full-page load time already, including optimizing images, sticking to a performance budget, and avoiding third-party files that can slow load time. You can also optimize the fonts and structure of your webpages so they can be rendered faster and without preventing other aspects of the page to load. And, it can help to avoid redirect links, which automatically send users to new URLs.

How to analyze and improve your mobile page speed

So how can you get faster? Start with understanding what to optimize (and prioritize) on your site, and to what extent. As a first step, you can test your site's performance using https://testmysite.thinkwithgoogle.com/

And, this study produced a new open-source code freely available on GitHub that can be applied to any website. Your web development team can use it to analyze the performance data for your business. It answers questions like:

• What factors of my site most influence my business metrics?
• What performance metrics should I focus on?
• How much faster do I need to make my site to see a measurable impact in conversions and bounce rate?
• What would the ROI be for improving the site performance?
• How much is slow performance costing my business?
• At what point should I expect to see diminishing returns on improving performance? 

Give it a try. All you have to lose is latency.

For more on the results of our study, read the full report at SOASTA.